// components/home-users/home-users.ts
import tran from '../../utils/language'
Component({
  pageLifetimes: {
    show() {
      this.getMbtil()
    }
  },
  created() {
    // 在组件实例刚刚被创建时执行
    this.getMbtil()
  },
  // 
  attached() {
    // 在组件实例进入页面节点树时执行
  },
  ready() {
    // 在组件在视图层布局完成后执行
  },
  options: {
    "styleIsolation": 'apply-shared', // app.sass样式生效
  },
  /**
   * 组件的属性列表
   */
  properties: {
    userList: {
      type: Array,
      value: []
    },
    showSearch: {
      type: Boolean,
      value: true
    },
    showFilter: {
      type: Boolean,
      value: false
    },
    filterParams: {
      type: Object,
      value: {
        maxAge: '',
        minAge: '',
        currentProvinceCode: '',
        currentDistrictCode: '',
        gender: '',
        genderText: '',
        personalities: '',
        currentCityCode: '',
        ageValue: '',
        ageText: ''
      },
      observer(newVal) {
        this.checkSelect()
        this.handleRegion()
        this.handlAge()
        this.handlGender()
        this.handleMbti()
        // 判断数据是否有变化，有变化就调用查询接口
      }
    },
    type: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    _t: tran._t('homeUsers'),
    _tBase: tran._t('base'),
    selectBtnList: [
      {
        selectFlag: false,
        text: '性格',
        value: 'mbti'
      },
      {
        selectFlag: false,
        text: '年龄',
        value: 'age'
      },
      {
        selectFlag: false,
        text: '区域',
        value: 'region'
      },
      {
        selectFlag: false,
        text: '性别',
        value: 'gender'
      }
    ],
    keyword: '',
    pickerParams: {
      show: false,
      pickerType: 'MBTI',
      defaultValue: '',
      title: '性格类型',
      data: ['ENFP', 'ENSP']
    },
    pickerHomeAreaParams: {
      show: false,
      pickerType: 'areaRegion',
      defaultValue: [''],
      data: [] as commonPickerDataType[]
    },
    commonPickerAgeParams: {
      show: false,
      pickerType: 'age',
      defaultValue: '',
      data: [] as commonPickerDataType[]
    },
    commonPickerGenderParams: {
      show: false,
      pickerType: 'gender',
      defaultValue: '',
      data: [] as commonPickerDataType[]
    },
    selectList: [
      {
        selectFlag: true,
        text: 'ENFP',
        tagTypeId: ''
      }
    ],
    mbtiList: [
      {
        selectFlag: false,
        text: 'INTP'
      },
      {
        selectFlag: false,
        text: 'INTJ'
      },
      {
        selectFlag: false,
        text: 'ENTJ'
      },
      {
        selectFlag: false,
        text: 'ENTP'
      },
      {
        selectFlag: false,
        text: 'ENFP'
      },
      {
        selectFlag: false,
        text: 'INFP'
      },
      {
        selectFlag: false,
        text: 'ENFJ'
      },
      {
        selectFlag: false,
        text: 'INFJ'
      },
      {
        selectFlag: false,
        text: 'ISTJ'
      },
      {
        selectFlag: false,
        text: 'ISFJ'
      },
      {
        selectFlag: false,
        text: 'ESTJ'
      },
      {
        selectFlag: false,
        text: 'ESFJ'
      },
      {
        selectFlag: false,
        text: 'ISTP'
      },
      {
        selectFlag: false,
        text: 'ISFP'
      },
      {
        selectFlag: false,
        text: 'ESTP'
      },
      {
        selectFlag: false,
        text: 'ESFP'
      }
    ],
    ageList: [
      {
        selectFlag: false,
        text: '18及以下',
        value: '0-18'
      },
      {
        selectFlag: false,
        text: '18-25',
        value: '18-25'
      },
      {
        selectFlag: false,
        text: '26-32',
        value: '26-32'
      },
      {
        selectFlag: false,
        text: '33-41',
        value: '33-41'
      },
      {
        selectFlag: false,
        text: '42-55',
        value: '42-55'
      },
      {
        selectFlag: false,
        text: '55及以上',
        value: '55-200'
      }
    ],
    commonPickerType: '',
    commonPickerGenderData: [
      {
        text: '全部',
        value: '',
        selectFlag: false
      },
      {
        text: '女性',
        value: '2',
        selectFlag: false
      },
      {
        text: '男性',
        value: '1',
        selectFlag: false
      },
      {
        text: '其他',
        value: '0',
        selectFlag: false
      },
    ],
    selectMbtiList: [
      {
        selectFlag: false,
        text: '',
        tagTypeId: ''
      }
    ],
    formData: {
      interestIds: '',
      characterType: '',
      professionId: '',
      personalities: '',
      professionName: '',
      interestName: '',
      languageText: '',
      languages: '',
      genderText: '',
      gender: '',
      ageText: '',
      minAge: 0,
      maxAge: 0,
      online: 'all',
      currentProvinceCode: '',
      currentCityCode: '',
      currentDistrictCode: '',
      regionTextList: [],
      regionCodeList: [],
      ageValue: ''
    },
    regionTextList: [],
    regionCodeList: [],
    mbtiPickerParams: {
      show: false,
      pickerType: 'mbti',
      defaultValue: '',
      data: [] as commonPickerDataType[]
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    pickerCancel() {
      const { pickerParams, mbtiPickerParams } = this.data
      pickerParams.show = false
      mbtiPickerParams.show = false
      this.setData({
        pickerParams,
        mbtiPickerParams
      })
    },
    pickerHomeRegionCancle() {
      const { pickerHomeAreaParams } = this.data
      pickerHomeAreaParams.show = false
      this.setData({
        pickerHomeAreaParams
      })
    },

    commonPickerCancel() {
      const { commonPickerAgeParams, commonPickerGenderParams } = this.data
      commonPickerAgeParams.show = false
      commonPickerGenderParams.show = false
      this.setData({
        commonPickerAgeParams,
        commonPickerGenderParams
      })
    },
    introducedFather() {
      this.triggerEvent('filterSelectChange', this.data.formData)
    },
    // 性格选择器面板确认按钮
    confirmPicker(e: any) {
      if (e.detail && e.detail.length > 0) {
        // selectBtnList
      }
      this.setData({
        selectMbtiList: e.detail
      }, () => {
        this.handlePickerData()
        this.pickerCancel()
        this.checkSelect()
      })
    },
    // 处理选择器的数据
    handlePickerData() {
      const { selectMbtiList, formData, pickerParams } = this.data
      pickerParams.show = false
      // 过滤出选中的几项
      let ids: any = []
      let nameList: any = []
      selectMbtiList.length > 0 && selectMbtiList.map((item: any) => {
        ids.push(item.tagTypeId)
        nameList.push(item.text)
      })
      let textList: any = []
      selectMbtiList.length > 0 && selectMbtiList.map((item: any) => {
        textList.push(item.text)
      })
      formData.personalities = textList.length > 0 ? textList.join(',') : ''
      this.setData({
        formData
      })
      pickerParams.defaultValue = textList
      this.setData({
        formData,
        textList,
        pickerParams,
      }, () => {
        this.triggerEvent('filterSelectChange', formData)
      })
    },
    getMbtil() {
      let list = getApp().globalData.mbtiList
      // type
      const { pickerParams } = this.data
      let mbtiList: any = [
        // {
        //   selectFlag: false,
        //   text: '全部'
        // }
      ]
      list.length > 0 && list.map((item: any) => {
        const obj = {
          selectFlag: false,
          text: item
        }
        mbtiList.push(obj)
      })
      pickerParams.data = mbtiList
      this.setData({
        selectList: mbtiList,
        mbtiList
      })
      const {type, selectBtnList} = this.data
      if (type == '2') {
        selectBtnList[0].text = 'MBTI性格'
        this.setData({
          selectBtnList
        })
      }
    },
    /**
     * 区域选择器确认按钮
     * @param e 
     */
    commonHomeAreaPickerConfirm(e: any) {
      const obj = e.detail.value
      if (obj && Object.keys(obj).length > 0) {
        const { formData } = this.data
        const regionCodeList: any = [obj.provincesValue, obj.cityValue, obj.regionValue]
        const regionTextList: any = [obj.provincesLabel, obj.cityLabel, obj.regionLabel]
        if (regionCodeList.length > 0) {
          formData.currentProvinceCode = obj.provincesValue
          formData.currentCityCode = obj.cityValue
          formData.currentDistrictCode = obj.regionValue
          formData.regionTextList = regionTextList
          formData.regionCodeList = regionCodeList
        }
        this.pickerHomeRegionCancle()
        this.setData({
          regionTextList,
          regionCodeList,
          formData,
        })
        this.triggerEvent('filterSelectChange', formData)
      }
    },

    /**
     * 普通的选择器确认按钮
     * @param e 
     */
    commonPickerConfirm(e: any) {
      const { commonPickerType } = this.data
      const obj = e.detail.value
      const { formData } = this.data
      if (commonPickerType == 'gender') { // 性别
        formData.genderText = obj.text
        formData.gender = obj.value
      } else if (commonPickerType == 'age') { // 年龄范围
        formData.ageText = obj.text
        formData.ageValue = obj.value
        const list = obj.value.split('-')
        formData.minAge = list[0]
        formData.maxAge = list[1]
      }
      // 关闭弹框
      this.commonPickerCancel()
      this.setData({
        formData
      }, () => {
        this.triggerEvent('filterSelectChange', formData)
      })
    },
    commonMbtiPickerConfirm (e: any) {
      // console.log(e.detail.value.text,'这里');
      this.setData({
        selectMbtiList: [e.detail.value]
      }, () => {
        this.handlePickerData()
        this.pickerCancel()
        this.checkSelect()
      })
    },
    /**
     * 重置用户筛选的条件
     */
    resetUserCondition() {
      const { selectBtnList } = this.data
      selectBtnList.map(item => {
        item.selectFlag = false
      })
      this.setData({
        selectBtnList
      })
    },
    // commonPickerGenderParams
    handleMbti() {
      const { filterParams, pickerParams } = this.data
      if (filterParams.personalities) {
        pickerParams.defaultValue = filterParams.personalities
        this.setData({
          pickerParams
        })
      }
    },
    handlAge() {
      const { filterParams, commonPickerAgeParams } = this.data
      if (filterParams.ageValue) {
        commonPickerAgeParams.defaultValue = filterParams.ageText
      }
      this.setData({
        commonPickerAgeParams
      })
    },
    handlGender () {
      const { filterParams, commonPickerGenderParams } = this.data
      if (filterParams.ageValue) {
        commonPickerGenderParams.defaultValue = filterParams.gender
      }
      this.setData({
        commonPickerGenderParams
      })
    },
    // 处理区域回显
    handleRegion() {
      const { filterParams, pickerHomeAreaParams } = this.data
      if (filterParams.currentProvinceCode) {
        pickerHomeAreaParams.defaultValue = [filterParams.currentProvinceCode, filterParams.currentCityCode, filterParams.currentDistrictCode]
        this.setData({
          pickerHomeAreaParams
        })
      }
    },
    changeSelect(e: any) {
      const { info } = e.currentTarget.dataset
      const { selectBtnList, mbtiPickerParams, type } = this.data
      // 判断用户点击的是哪一个按钮，从而将那一个按钮状态反选
      // selectBtnList.map(item => {
      //   if (item.text === info.text) {
      //     item.selectFlag = !item.selectFlag
      //   }
      // })
      if (type != 'home') {
        mbtiPickerParams.show = true
      } else {
        // 打开弹框
        this.openSelectPopup(info.value)
      }
      this.setData({
        selectBtnList: selectBtnList,
        commonPickerType: info.value,
        mbtiPickerParams
      })
      // this.triggerEvent('typeFilterChange', selectBtnList)
    },
    // 打开对应类型的弹框
    openSelectPopup(type: any) {
      let { pickerParams, pickerHomeAreaParams, commonPickerAgeParams, commonPickerGenderParams } = this.data
      if (type == 'mbti') { // 性格
        pickerParams.show = true
      } else if (type == 'age') { // 年龄
        commonPickerAgeParams.show = true
      } else if (type == 'region') { // 区域
        pickerHomeAreaParams.show = true
      } else if (type == 'gender') { // 性别
        commonPickerGenderParams.show = true
      }
      if (this.data.type == 'home') { // 首页的
        const obj = {
          pickerParams, pickerHomeAreaParams, commonPickerAgeParams, commonPickerGenderParams
        }
        this.triggerEvent('homeSelectBtn', obj)
      } else {
        this.setData({
          pickerParams, pickerHomeAreaParams, commonPickerAgeParams, commonPickerGenderParams
        })
      }
    },
    // 检查类型
    checkSelect() {
      const { filterParams, selectBtnList } = this.data
      const { maxAge, minAge, currentProvinceCode, currentDistrictCode, gender, genderText, personalities } = filterParams
      // 判断用户点击的是哪一个按钮，从而将那一个按钮状态反选
      selectBtnList.map(item => {
        if (item.text === '年龄') {
          if (minAge && maxAge) {
            item.selectFlag = true
          } else {
            item.selectFlag = false
          }
        }
        if (item.text === '区域') {
          if (currentProvinceCode && currentDistrictCode) {
            item.selectFlag = true
          } else {
            item.selectFlag = false
          }
        }
        if (item.text === '性别') {
          if (gender && genderText) {
            item.selectFlag = true
          } else {
            item.selectFlag = false
          }
        }
        if (item.text === '性格') {
          if (personalities) {
            item.selectFlag = true
          } else {
            item.selectFlag = false
          }
        }
      })
      this.setData({
        selectBtnList
      })
      // pickerHomeAreaParams
    },
    bindconfirm(e: any) {
      this.setData({
        keyword: e.detail.value
      }, () => {
        this.triggerEvent('keyworkChange', this.data.keyword)
      })
    },
    filterShow() {
      this.triggerEvent('showPopupEvent');
    },
    clickUser(e: any) {
      const { info } = e.currentTarget.dataset
      // 给父组件传值
      this.triggerEvent('userEvent', info);
    }
  }
})